<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>

    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/cart.css">
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="shortcut icon" href="./icon/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/reset.css">
    <script src="./js/axios.js"></script>
    <script src="./js/jquery-2.2.4.js"></script>
    <script type="text/javascript" src="./layer-master/src/layer.js"></script>
    <!-- <link rel="stylesheet" href="./css/loading.css"> -->


</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="h-con w">
            <div class="h-title">
                <a href="./index.html">
                    <div class="logo fl">
                    </div>
                </a>
                <h1>我的购物车</h1>
            </div>
            <div class="h-info">
                <a href="./login2.html">登录</a>
                <span>|</span>
                <a href="./register.html">注册</a>
            </div>
        </div>
    </header>
    <!-- 购物区 -->
    <section>
        <div class="s-con w">
            <!-- <div class="cart clearfix">
                <div class="cart-bg fl"></div>
                <div class="cart-info fl">
                    <h2>你的购物车还是空的!</h2>
                    <p>登录后将显示您之前加入的商品</p>
                    <div class="cart-btns">
                        <a href="./login2.html">
                            <div class="cart-btn cart-login fl">
                                立即登录
                            </div>
                        </a>
                        <a href="#">
                            <div class="cart-btn cart-register fl">
                                马上去购物
                            </div>
                        </a>
                    </div>
                </div>
            </div> -->

            <!-- 购物车选项 -->
            <table>
                <thead>
                    <tr>
                        <th style="width: 110px;">
                            <input type="checkbox" name="" class="check-all">
                            全选</th>
                        <th style="width: 120px;">图片</th>
                        <th style="width: 380px;">商品名称</th>
                        <th style="width: 158px;">单价</th>
                        <th style="width: 210px;">数量</th>
                        <th style="width: 200px;">小计</th>
                        <th style="width: 80px;">操作</th>
                    </tr>
                </thead>
                <tbody id="tab">


                    <!-- <tr>
                        <td>
                            <input type="checkbox" name="" id="">
                        </td>
                        <td><img src="https://z3.ax1x.com/2021/09/23/4wdqnU.jpg" alt=""></td>
                        <td> 小米10 </td>
                        <td>3999</td>
                        <td>
                            <button class="sub">-</button>
                            <input value="1">
                            <button class="sup">+</button>
                        </td>
                        <td> 3999 </td>
                        <td><i class="del iconfont icon-cha"></i></td>
                    </tr> -->

                </tbody>
            </table>

            <!-- 合计 -->

            <div class="cart-bar">
                <p class="fl">共<span class="buy-number">0</span>件商品</p>
                <div class="pay fr">去结算</div>
                <p class="fr">合计：<span class="total-money">0</span>元</p>
            </div>

        </div>
    </section>
    <!-- 推荐区 -->
    <section>
        <div class="r-con w">
            <div class="recommend">
                <div class="r-title pos-r">
                    <h3>为您推荐</h3>
                </div>
                <ul class="r-items">
                    <!-- <li class="item">
                        <img src="./img/推荐1.webp" alt="">
                        <p class="item-name">Note 9 4G</p>
                        <p class="item-price">899元</p>
                        <p class="item-praise">10.4万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>


                    <li class="item ">
                        <img src="./img/推荐2.webp" alt="">
                        <p class="item-name">Note 9 5G</p>
                        <p class="item-price">1199元</p>
                        <p class="item-praise">72.5万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="./img/推荐3.webp" alt="">
                        <p class="item-name">Redmi Note 10 Pro</p>
                        <p class="item-price">1599元</p>
                        <p class="item-praise">23.3万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="./img/推荐4.webp" alt="">
                        <p class="item-name">Redmi K40 游戏增强版</p>
                        <p class="item-price">1999元</p>
                        <p class="item-praise">8.5万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="./img/推荐5.webp" alt="">
                        <p class="item-name">Redmi 9A</p>
                        <p class="item-price">499元</p>
                        <p class="item-praise">66.8万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="./img/推荐6.webp" alt="">
                        <p class="item-name">Note 9 Pro 5G</p>
                        <p class="item-price">1399元</p>
                        <p class="item-praise">72.5万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="./img/推荐7.webp" alt="">
                        <p class="item-name">小米11</p>
                        <p class="item-price">3799元</p>
                        <p class="item-praise">23万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="./img/推荐8.webp" alt="">
                        <p class="item-name">Redmi K40</p>
                        <p class="item-price">1999元</p>
                        <p class="item-praise">56.2万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="./img/推荐9.webp" alt="">
                        <p class="item-name">黑鲨4</p>
                        <p class="item-price">2499元</p>
                        <p class="item-praise">7.9万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="./img/推荐10.webp" alt="">
                        <p class="item-name">Redmi Note 10 5G</p>
                        <p class="item-price">1099元</p>
                        <p class="item-praise">23.3万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="./img/推荐11.webp" alt="">
                        <p class="item-name">Redmi K40 Pro+</p>
                        <p class="item-price">3399元</p>
                        <p class="item-praise">56.2万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="./img/推荐12.webp" alt="">
                        <p class="item-name">Redmi K40 Pro</p>
                        <p class="item-price">2499元</p>
                        <p class="item-praise">56.2万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>


                    <li class="item ">
                        <img src="./img/推荐13.webp" alt="">
                        <p class="item-name">黑鲨4 Pro</p>
                        <p class="item-price">3999元</p>
                        <p class="item-praise">7.9万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="./img/推荐14.webp" alt="">
                        <p class="item-name">小米10S</p>
                        <p class="item-price">2999元</p>
                        <p class="item-praise">14.7万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>


                    <li class="item ">
                        <img src="./img/推荐15.webp" alt="">
                        <p class="item-name">Redmi K30 至尊纪念版</p>
                        <p class="item-price">1999元</p>
                        <p class="item-praise">61.8万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="./img/推荐16.webp" alt="">
                        <p class="item-name">腾讯黑鲨游戏手机3S</p>
                        <p class="item-price">3999元</p>
                        <p class="item-praise">2.8万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="./img/推荐17.webp" alt="">
                        <p class="item-name">小米11 青春版</p>
                        <p class="item-price">2099元</p>
                        <p class="item-praise">8.9万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="./img/推荐18.webp" alt="">
                        <p class="item-name">小米11 Pro</p>
                        <p class="item-price">4499元</p>
                        <p class="item-praise">6.9万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="./img/推荐19.webp" alt="">
                        <p class="item-name">Xiaomi MIX 4</p>
                        <p class="item-price">4999元</p>
                        <p class="item-praise">1810人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li>

                    <li class="item ">
                        <img src="./img/推荐20.webp" alt="">
                        <p class="item-name">小米11 Uitra</p>
                        <p class="item-price">5499元</p>
                        <p class="item-praise">7.4万人好评</p>
                        <div class="item-btn">
                            加入购物车
                        </div>
                    </li> -->
                </ul>
            </div>
        </div>
        <script src="./js/recommend.js"></script>
        <script src="./js/cart.js"></script>
    </section>

















    </script>

</body>

</html>